<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <my-child></my-child>
  </div>
  <script>
    Vue.mixin({
      beforeCreate() {
        console.log('全局混入')
      },
    })

    Vue.component('my-child', {
      data() {
        return {
          msg: '4444'
        }
      },
      beforeCreate() {
        console.log('children beforeCreate')
      },
      created() {
        console.log('children created')
      },
      beforeMount() {
        console.log('children beforeMount')
      },
      render(h) {
        console.log('children render');
        return h('p', this.msg);
      },
      mounted() {
        console.log('children mounted')
      },
      beforeUpdate() {
        console.log('children beforeUpdate')
      },
      updated() {
        console.log('children updated')
      },
      beforeDestroy() {
        console.log('children beforeDestroy')
      },
      destroyed() {
        console.log('children destroyed')
      },
    })
    let vm = new Vue({
      el: '#app',
      data() {
        return {
          msg: '111'
        }
      },
      beforeCreate() {
        console.log('this', this);
        console.log('parent beforeCreate')
      },
      created() {
        console.log('parent created')
      },
      beforeMount() {
        console.log('parent beforeMount')
      },
      // render(h) {
      //   console.log('parent render');
      //   return h('h3', this.msg);
      // },
      mounted() {
        console.log('parent mounted')
      },
      beforeUpdate() {
        console.log('parent beforeUpdate')
      },
      updated() {
        console.log('parent updated')
      },
      beforeDestroy() {
        console.log('parent beforeDestroy')
      },
      destroyed() {
        console.log('parent destroyed')
      },
    })
    console.dir(vm)
    setTimeout(() => {
      vm.msg = '9999'
      vm.$destroy();
    }, 1000);
  </script>
</body>

</html>